<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ title }}{% endblock %} - FastAPI插件系统</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .status-active {
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
        }
        .status-inactive {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        }
        .status-loading {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        }
    </style>
    
    {% block head %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="gradient-bg text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-puzzle-piece text-2xl mr-2"></i>
                        <span class="text-xl font-bold">FastAPI插件系统</span>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="/" class="hover:bg-white hover:bg-opacity-20 px-3 py-2 rounded-md text-sm font-medium transition-colors">
                        <i class="fas fa-home mr-1"></i>首页
                    </a>
                    <a href="/dashboard" class="hover:bg-white hover:bg-opacity-20 px-3 py-2 rounded-md text-sm font-medium transition-colors">
                        <i class="fas fa-tachometer-alt mr-1"></i>仪表板
                    </a>
                    <a href="/plugins" class="hover:bg-white hover:bg-opacity-20 px-3 py-2 rounded-md text-sm font-medium transition-colors">
                        <i class="fas fa-plug mr-1"></i>插件管理
                    </a>
                    <a href="/docs" class="hover:bg-white hover:bg-opacity-20 px-3 py-2 rounded-md text-sm font-medium transition-colors">
                        <i class="fas fa-book mr-1"></i>API文档
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <p class="text-gray-300">
                    <i class="fas fa-code mr-2"></i>
                    FastAPI插件系统 v1.0.0
                </p>
                <p class="text-gray-400 text-sm mt-2">
                    基于FastAPI构建的现代化插件管理系统
                </p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 全局配置
        const API_BASE = '/api/plugins';
        
        // 工具函数
        function showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                error: 'bg-red-500',
                warning: 'bg-yellow-500',
                info: 'bg-blue-500'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50`;
            notification.textContent = message;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
        
        function formatDate(dateString) {
            return new Date(dateString).toLocaleString('zh-CN');
        }
        
        function getStatusBadge(status) {
            if (status.active) {
                return '<span class="px-2 py-1 text-xs font-semibold rounded-full status-active text-white">运行中</span>';
            } else if (status.loaded) {
                return '<span class="px-2 py-1 text-xs font-semibold rounded-full status-loading text-white">已加载</span>';
            } else {
                return '<span class="px-2 py-1 text-xs font-semibold rounded-full status-inactive text-white">未加载</span>';
            }
        }
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html> 